<template>
  <!-- 编辑分类 -->
  <div class="add-cate-container" v-loading.lock.lock="loading">
    <div class="title">编辑分类</div>
    <el-form :model="ruleForm" :rules="rules" ref="myForm" label-width="100px" class="demo-ruleForm" label-position="right">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <!-- 活动级别 -->
      <el-form-item label="分类级别" prop="level">
        <el-select v-model="ruleForm.level" placeholder="请选择分类级别">
          <el-option label="一级" value="一级"></el-option>
          <el-option label="二级" value="二级"></el-option>
        </el-select>
      </el-form-item>
      <!-- 上级分类 -->
      <el-form-item label="上级分类" prop="super">
        <el-select v-model="ruleForm.super" placeholder="请选择上级分类">
          <el-option label="无上级分类" value="0"></el-option>
          <el-option v-for="item in cateGoryList.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 是否在导航栏显示 -->
      <el-form-item label="是否显示在导航栏" prop="nav_show">
        <el-switch v-model="ruleForm.nav_show"></el-switch>
      </el-form-item>
      <!-- 是否显示 -->
      <el-form-item label="是否显示" prop="is_show">
        <el-switch v-model="ruleForm.is_show"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="editSubmitForm(myForm)">提交</el-button>
        <el-button disabled>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import axios from '@/utils/request'
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 创建路由对象
const route = useRoute()
const router = useRouter()

// 获取分类id
const id = route.params.id

let loading = ref(false)
const myForm = ref(null)
let cateGoryList = reactive({ list: [] })
let ruleForm = reactive({
  name: '',
  level: '',
  super: '',
  nav_show: false,
  is_show: false
})

let rules = reactive({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
  ]
})

// 提交编辑
const editSubmitForm = (myForm) => {
  myForm.validate(async (valid) => {
    if (valid) {
      if (ruleForm.level === '二级' && ruleForm.super === '0') {
        return ElMessage({
          message: '二级分类必须选择上级分类！',
          type: 'error'
        })
      }
      if (ruleForm.level === '一级' && ruleForm.super !== '0' && ruleForm.super !== null) {
        return ElMessage({
          message: '一级分类不存在上级分类！',
          type: 'error'
        })
      }

      let body = {}
      if (ruleForm.super) {
        body = {
          cate_name: ruleForm.name,
          level: ruleForm.level,
          super_id: ruleForm.super,
          is_show: ruleForm.is_show,
          nav_show: ruleForm.nav_show
        }
      } else {
        body = {
          cate_name: ruleForm.name,
          level: ruleForm.level,
          is_show: ruleForm.is_show,
          nav_show: ruleForm.nav_show
        }
      }
      try {
        loading.value = true
        const data = await axios.post('/bus/edit/category/' + id, body)
        if (data.code === 0) {
          ElMessage({
            message: data.msg,
            type: 'success',
            duration: 1000,
            'on-close': () => {
              router.back()
            }
          })
        } else {
          ElMessage({
            message: data.msg,
            type: 'error'
          })
        }
      } catch {
        ElMessage.error('请求失败！')
      } finally {
        loading.value = false
      }
    } else {
      return false
    }
  })
}
// 根据id获取分类信息
const getCateInfoById = async () => {
  loading.value = true
  try {
    const data = await axios.get('/bus/category/' + id)
    console.log(data)
    if (data.code === 0) {
      ElMessage({
        type: 'success',
        message: data.msg
      })
      ruleForm.name = data.data.name
      ruleForm.level = data.data.level
      ruleForm.super = data.data.super_id
      ruleForm.nav_show = data.data.nav_show == '1' ? true : false
      ruleForm.is_show = data.data.is_show == '1' ? true : false
    } else {
      ElMessage.error(data.msg)
    }
  } catch {
    ElMessage.error('请求失败！')
  } finally {
    loading.value = false
  }
}
// 获取分类列表
const getCategoryList = async () => {
  try {
    const data = await axios.get('/bus/category/list')
    if (data.code === 0) {
      cateGoryList.list = data.data
    } else if (data.msg === '身份认证失败' || data.code === 403) {
      ElMessage({
        message: data.msg,
        type: 'error'
      })
      localStorage.removeItem('bus_token')
      router.replace('/login')
    }
  } catch (err) {
    ElMessage.error('请求失败！')
  }
}
getCategoryList()
getCateInfoById()
</script>

<style lang="scss" scoped>
.add-cate-container {
  border: 1px solid #e1e1e1;
  margin: 50px auto;
  width: 860px;
  min-height: 80vh;

  .title {
    font-size: 20px;
    color: #606266;
    font-weight: 700;
    text-align: center;
    margin: 50px 0;
  }
  form {
    width: 60%;
    margin: 0 auto;
  }

  :deep(.el-form-item__label) {
    width: 130px !important;
  }
  :deep(.el-input) {
    max-width: 80%;
  }
}
</style>
